<template>
  <div>
    <p>测试计算属性</p>
    <p>
      {{ count }} --{{ doubleCount }}--<button @click="count++">count++</button>
    </p>

    <p>
      <input type="text" v-model="userinfo.firstname" placeholder="姓" />
      <input type="text" v-model="userinfo.lastname" placeholder="名" />
      <input type="text" v-model="userinfo.fullname" placeholder="姓名" />
    </p>
  </div>
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      count: 10,
    };
  },
  computed: {
    //简写方式
    // doubleCount() {
    //   return this.count * 2;
    // },
    // 常规写法
    doubleCount: {
      get() {
        return this.count * 2;
      },
      set(val) {
        console.log(val);
      },
    },
  },
  setup() {
    let userinfo = reactive({
      firstname: "",
      lastname: "",
      fullname: "",
    });

    // 将fullname 设置为计算属性,依赖于 firstname 和lastname
    // 计算属性写法 -- 简写方式 相当于写了get 方法
    // userinfo.fullname = computed(() => {
    //   return userinfo.firstname + userinfo.lastname;
    // });

    // 计算属性的常规写法
    userinfo.fullname = computed({
      get() {
        return userinfo.firstname + userinfo.lastname;
      },
      set(val) {
        // console.log(val);
        userinfo.firstname = val.substr(0, 1);
        userinfo.lastname = val.substr(1);
      },
    });

    return {
      userinfo,
    };
  },
};
</script>
<style scoped>
</style>